﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap eCommerce Page Template</title>
    <style>
        .RecommendImg {
            width: 100%
        }

        #map {
            height: 50%;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .navbar-default {
            margin-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria - labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">路线详情</h4>
                </div>

                <div class="modal-body" id="modalContent">

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
                </div>
            </div>
        </div>
    </div>

    <nav class="navbar navbar-default" style="position:relative;top:50px">
        <div class="container">

            <span class="navbar-brand">
                <span class="glyphicon glyphicon-map-marker"></span><span></span>
            </span>

        </div>
    </nav>
    <ul class="list-group">
        <li class="list-group-item">出发地点：@ViewData["name"]<span class="caret"></span></li>
        <li class="list-group-item active">
            到达我的位置
            <a class="btn btn-default btn-lg dropdown-toggle" type="button" style="margin-left:30%">
                GPS定位 <span class="glyphicon glyphicon-map-marker"></span>
            </a>
        </li>

    </ul>

    <div class="list-group" style="margin-bottom:0;position:relative;top:2px;">
        <a href="#" class="list-group-item active">
            地图选点
        </a>
    </div>
    <div id="map"></div>
    <div class="panel-body">

    </div>
    <div class="list-group">
        <a href="#" class="list-group-item active">
            以下是为您推荐的地点：
        </a>
        <div class="row">
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img onclick="Imgclick(0)" class="img-rounded RecommendImg" src="~/images/黎家乐.jpg" alt="Card image cap">
                    <div class="caption">
                        <h3>游客码头</h3>
                        <p>周边环境优美,住宿设施良好,融入了现代化建筑风格,简约舒适,欢迎顾客们的光临！</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img onclick="Imgclick(13)" class="img-rounded RecommendImg" src="~/images/黎家乐.jpg" alt="Card image cap">
                    <div class="caption">
                        <h3>村史馆 </h3>
                        <p>周边环境优美,住宿设施良好,融入了现代化建筑风格,简约舒适,欢迎顾客们的光临！</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img onclick="Imgclick(5)" class="img-rounded RecommendImg" src="~/images/黎家乐.jpg" alt="Card image cap">
                    <div class="caption">
                        <h3>游客中心</h3>
                        <p>周边环境优美,住宿设施良好,融入了现代化建筑风格,简约舒适,欢迎顾客们的光临！</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img onclick="Imgclick(7)" class="img-rounded RecommendImg" src="~/images/黎家乐.jpg" alt="Card image cap">
                    <div class="caption">
                        <h3>老周三村-南门</h3>
                        <p>周边环境优美,住宿设施良好,融入了现代化建筑风格,简约舒适,欢迎顾客们的光临！</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img onclick="Imgclick(8)" class="img-rounded RecommendImg" src="~/images/黎家乐.jpg" alt="Card image cap">
                    <div class="caption">
                        <h3>民宿</h3>
                        <p>周边环境优美,住宿设施良好,融入了现代化建筑风格,简约舒适,欢迎顾客们的光临！</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img onclick="Imgclick(12)" class="img-rounded RecommendImg" src="~/images/黎家乐.jpg" alt="Card image cap">
                    <div class="caption">
                        <h3>黎家乐</h3>
                        <p>周边环境优美,住宿设施良好,融入了现代化建筑风格,简约舒适,欢迎顾客们的光临！</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    


    ///地图选点代码：
    var allPoints = [
        { "lat": 19.294005, "lng": 109.525726 },
        { "lat": 19.295305, "lng": 109.525122 },
        { "lat": 19.295469, "lng": 109.524929 },
        { "lat": 19.296050, "lng": 109.524810 },
        { "lat": 19.296844, "lng": 109.524485 },
        { "lat": 19.297355, "lng": 109.524506 },
        { "lat": 19.297396, "lng": 109.524023 },
        { "lat": 19.298221, "lng": 109.524018 },
        { "lat": 19.298647, "lng": 109.523755 },
        { "lat": 19.298789, "lng": 109.524064 },
        { "lat": 19.298302, "lng": 109.524353 },
        { "lat": 19.297976, "lng": 109.524795 },
        { "lat": 19.296215, "lng": 109.525183 },
        { "lat": 19.298098, "lng": 109.522711 }];
    var nameArray = ["游客码头", "", "", "", "", "游客中心", "", "老周三村-南门", "民宿", "", "老周三村-东门", "", "黎家乐", "村史馆"]
    var contentArray = new Array();
    for (i = 0; i < 14; i++) {
        contentArray[i] = '<div id="content">' +
            '<div id="siteNotice">' +
            '</div>' +
            '<h1 id="firstHeading" class="firstHeading">' + nameArray[i] + '</h1>' +
            '<div id="bodyContent">' +
            '<p><a type="button" class="btn btn-default" href="/Home/map?starNum='+@ViewData["point"]+'&starLat=' + allPoints[@ViewData["point"]].lat + '&starLng=' + allPoints[@ViewData["point"]].lng +'&endNum='+i+'&endLat=' + allPoints[i].lat + '&endLng=' + allPoints[i].lng+'">' +
            '选择此处</a></p>' +
            '</div>' +
            '</div>';
    }
    function Imgclick(i) {
        window.location.href = "/Home/map?starNum=" +@ViewData["point"]+"&starLat=" + allPoints[@ViewData["point"]].lat + "&starLng=" + allPoints[@ViewData["point"]].lng + "&endNum=" + i + "&endLat=" + allPoints[i].lat + "&endLng=" + allPoints[i].lng 
    }
    var map; var uluru = { lat: 19.2982098250356, lng: 109.523897810298 };
    function initMap() {

        // var uluru={lat:31.230772, lng: 121.473639};
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 18,
            mapTypeId: 'satellite',
            center: uluru,
            disableDefaultUI: true

        });
        var marker0 = new google.maps.Marker({
            position: allPoints[0],
            map: map,
            label: nameArray[0]
        });
        var marker1 = new google.maps.Marker({
            position: allPoints[1],
            map: map,
            label: nameArray[1]
        });
        var marker2 = new google.maps.Marker({ position: allPoints[2], map: map, label: nameArray[2] });
        var marker3 = new google.maps.Marker({ position: allPoints[3], map: map, label: nameArray[3] });
        var marker4 = new google.maps.Marker({ position: allPoints[4], map: map, label: nameArray[4] });
        var marker5 = new google.maps.Marker({ position: allPoints[5], map: map, label: nameArray[5] });
        var marker6 = new google.maps.Marker({ position: allPoints[6], map: map, label: nameArray[6] });
        var marker7 = new google.maps.Marker({ position: allPoints[7], map: map, label: nameArray[7] });
        var marker8 = new google.maps.Marker({ position: allPoints[8], map: map, label: nameArray[8] });
        var marker9 = new google.maps.Marker({ position: allPoints[9], map: map, label: nameArray[9] });
        var marker10 = new google.maps.Marker({ position: allPoints[10], map: map, label: nameArray[10] });
        var marker11 = new google.maps.Marker({ position: allPoints[11], map: map, label: nameArray[11] });
        var marker12 = new google.maps.Marker({ position: allPoints[12], map: map, label: nameArray[12] });
        var marker13 = new google.maps.Marker({ position: allPoints[13], map: map, label: nameArray[13] });

        var infowindow0 = new google.maps.InfoWindow({ content: contentArray[0] });
        var infowindow1 = new google.maps.InfoWindow({ content: contentArray[1] });
        var infowindow2 = new google.maps.InfoWindow({ content: contentArray[2] });
        var infowindow3 = new google.maps.InfoWindow({ content: contentArray[3] });
        var infowindow4 = new google.maps.InfoWindow({ content: contentArray[4] });
        var infowindow5 = new google.maps.InfoWindow({ content: contentArray[5] });
        var infowindow6 = new google.maps.InfoWindow({ content: contentArray[6] });
        var infowindow7 = new google.maps.InfoWindow({ content: contentArray[7] });
        var infowindow8 = new google.maps.InfoWindow({ content: contentArray[8] });
        var infowindow9 = new google.maps.InfoWindow({ content: contentArray[9] });
        var infowindow10 = new google.maps.InfoWindow({ content: contentArray[10] });
        var infowindow11 = new google.maps.InfoWindow({ content: contentArray[11] });
        var infowindow12 = new google.maps.InfoWindow({ content: contentArray[12] });
        var infowindow13 = new google.maps.InfoWindow({ content: contentArray[13] });

        marker0.addListener('click', function () { infowindow0.open(map, marker0); });
        marker1.addListener('click', function () { infowindow1.open(map, marker1); });
        marker2.addListener('click', function () { infowindow2.open(map, marker2); });
        marker3.addListener('click', function () { infowindow3.open(map, marker3); });
        marker4.addListener('click', function () { infowindow4.open(map, marker4); });
        marker5.addListener('click', function () { infowindow5.open(map, marker5); });
        marker6.addListener('click', function () { infowindow6.open(map, marker6); });
        marker7.addListener('click', function () { infowindow7.open(map, marker7); });
        marker8.addListener('click', function () { infowindow8.open(map, marker8); });
        marker9.addListener('click', function () { infowindow9.open(map, marker9); });
        marker10.addListener('click', function () { infowindow10.open(map, marker10); });
        marker11.addListener('click', function () { infowindow11.open(map, marker11); });
        marker12.addListener('click', function () { infowindow12.open(map, marker12); });
        marker13.addListener('click', function () { infowindow13.open(map, marker13); });

    }
//<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAcO8m4Q-T4mNgta2jHdL_Oap6bUDCXbAI&callback=initMap" async defer></script>
</script>
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyAJY36og3T58rud04-oX_No9AUZv_cfrc8&callback=initMap" async defer></script>